<template>
	<div>
		<el-dialog :title="title" :visible.sync="dialogVisible" :close-on-click-modal="false" width="600px" @closed="resetForm('form')">
			<div>
				<el-form ref="form" :rules="rules" :model="form" label-width="80px">
					<el-form-item label="栏目">
						<sw-search-tree-select v-model="form.pid" :tree-data="tableData" :default-props="treeProps"></sw-search-tree-select>
					</el-form-item>
					<el-form-item label="类型" v-show="title == '新增源'">
						<el-radio-group v-model="form.classType">
							<el-radio label="41">书籍源</el-radio>
							<el-radio label="11">文章源</el-radio>
							<el-radio label="21">图片源</el-radio>
							<el-radio label="31">链接源</el-radio>
						</el-radio-group>
					</el-form-item>
					<el-form-item label="名称" prop="name"><el-input v-model.trim="form.name"></el-input></el-form-item>
					<!-- <el-form-item label="排序" prop="orderBy">
						<el-input-number
						  v-model="form.orderBy"
						  :min="1"
						  :max="1000"
						  size="medium"
						  label="排序"
						></el-input-number>
					  </el-form-item> -->
				</el-form>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="dialogVisible = false">取 消</el-button>
				<el-button type="primary" v-preventReClick @click="submitForm('form')">提 交</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
export default {
	data() {
		return {
			title: '新增',
			dialogVisible: false,
			form: {
				name: '', //名称
				classType: '41', //11.文章源 21.图片源 31.链接源 41.书籍源
				orderBy: 1000
			},
			rules: {
				name: [{ required: true, message: '请输入名称', trigger: 'blur' }]
			},
			curColumn: {},
			curTemplate: {},
			tableData: [],
			parentFlag: false,
			listQuery: {
				classType: '1'
			},
			treeProps: {
				label: 'name',
				children: 'childList',
				hasChildren: 'hasChildren'
			}
		};
	},
	mounted() {
		this.getColumnData();
		this.$bus.$on('columnSourceAdd', this.init);
	},
	beforeDestroy() {
		this.$bus.$off('columnSourceAdd');
	},
	methods: {
		//显示弹窗
		init(row, type) {
			this.parentFlag = false;
			this.curColumn = row || {};
			this.curTemplate = {};
			if (!type) {
				//新增根栏目
				this.form = this.$options.data().form;
				this.$delete(this.form, 'id');
			} else if (type == 'add') {
				//新增子栏目
				this.form = this.$options.data().form;
				this.form.pid = row.id;
				this.$delete(this.form, 'id');
			} else {
				//编辑栏目
				var list={
					pid:row.pid,
					classType:row.classType,
					name:row.name,
				}
				this.form = { ...this.form, ...list };
				this.$set(this.form, 'id', row.id);
				this.curTemplate = row.extFiled1 ? JSON.parse(row.extFiled1) : {};
				this.parentFlag = row.classLevel <= 2;
			}
			this.title = type == 'edit' ? '编辑源' : '新增源';
			this.dialogVisible = true;
		},

		submitForm(form) {
			this.$refs[form].validate(async valid => {
				if (valid) {
					let dispatchType = this.title == '新增源' ? 'addWebColumn' : 'updateWebColumn';
					await this.$store.dispatch(dispatchType, this.form);
					this.done();
				}
			});
		},
		done() {
			this.dialogVisible = false;
			this.$bus.$emit('getWebColumnList');
			this.$message({
				message: '操作成功',
				type: 'success'
			});
		},
		resetForm(form) {
			this.$refs[form].resetFields();
		},

		//获取栏目数据
		async getColumnData() {
			let res = await this.$store.dispatch('queryWebColumn', this.listQuery);
			if (res.code === '0') {
				this.tableData = res.data;
			}
		}
	}
};
</script>
